<template>

    <input type="button" value="批量修改" @click="UpdAll"/>

    <table border="1">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" v-model="chAll" @change="checkAll"/>全选
                </td>
                <td>房号名称</td>
                <td>房型</td>
                <td>房态</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in Num">
                <td>
                    <input type="checkbox" :checked="ischeck" v-model="newArry" :value="item.Rnum_Id" @change="isAll"/>
                </td>
                <td>{{item.Rnum_Name}}</td>
                <td>{{item.Rtype_Name}}</td>
                <td>{{item.Rnum_State==true?"上架":"下架"}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

//创建路由实例
const router=useRouter();

//创建生命周期钩子
onMounted(()=>{
    Show();
})

//创建响应式数据
const Num=ref([{
   Rnum_Id:0,
   Rnum_Name:"",
   Rnum_State:true,
   Rtype_Id:0,
   Rtype_Name:""
}])

//显示数据
const Show=()=>{
    axios.get("https://localhost:7249/api/RoomNumber/ShowRoomNumber")
    .then(res=>{
        Num.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

//全选反选参数
const chAll=ref(false)
const ischeck=ref(false)
const newArry=ref([])

//全选
const checkAll=()=>{
    if(chAll.value)
    {
        ischeck.value=true;
        newArry.value=Num.value.map((i:any)=>{
            return i.Rnum_Id;
        })
    }
    else{
        ischeck.value=false;
        newArry.value=[];
    }
}

//反选
const isAll=()=>{
    if(newArry.value.length==Num.value.length)
    {
        chAll.value=true;
    }
    else{
        chAll.value=false;
    }
}

//批量上下架
const UpdAll=()=>{
    if(confirm("确定要修改吗?"))
    {
        axios.get("https://localhost:7249/api/RoomNumber/UpdStateAll",{
            params:{
                ids:newArry.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0)
            {
                alert("批量修改成功");
                Show();
            }
            else{
                alert("批量修改失败");
            }
        })
    }
}
</script>